<template>
    <view class="step11-box step-box">
        <UNavbar title="施工前安全提醒"> </UNavbar>
        <view class="tips">
            <view>1、戴好绝缘手套</view>
            <view>2、戴好安全帽、系紧帽带</view>
            <view>3、栓挂好安全带，高挂抵用</view>
            <view>4、必须首先验电</view>
            <view>5、不得从事与工作无关的事情</view>
            <view>6、严禁抛物或掉落物品</view>
        </view>
        <TabStep @leftClick="onLeftClick" @rightClick="onRightClick"></TabStep>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onHide } from '@dcloudio/uni-app'; // Uniapp 页面生命周期
import TabStep from './TabStep.vue';
import UNavbar from '@/components/YNavbar/index.vue';
const data = reactive({
    status: '施工前安全提醒',
});

onMounted(() => {
    initAudio();
});

// 页面隐藏时停止播放
onHide(() => {
    destroyAudio();
});
let audio = ref(null);
const initAudio = () => {
    audio.value = uni.createInnerAudioContext();
    audio.value.src = '/static/t12.mp3'; // 替换为实际音频URL
    try {
        audio.value.play();
        console.log('正在播放...');
        data.status =
            '1、戴好绝缘手套2、戴好安全帽、系紧帽带3、栓挂号安全带，高挂抵用4、必须首先验电5、不得从事与工作无关的事情6、严禁抛物或掉落物品';
    } catch (error) {
        console.error('播放失败:', error);
        uni.showToast({
            title: '自动播放失败',
            icon: 'error',
        });
    }
};
const destroyAudio = () => {
    audio.value.destroy();
};

const onLeftClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step10',
    });
};
const onRightClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step12',
    });
};
</script>

<style lang="scss">
.step11-box {
    .u-td {
        height: auto;
    }
    .u-button {
        width: auto;
    }
}
</style>
